<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.marquee.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.blockUI.js"></script>
	<script type="text/javascript" src="js/jquery.jstree.js"></script>
	<style>
	
	body{
		font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
		width: 340px;
		overflow: hidden;
	}
	p, h1, form, button{border:0; margin:0; padding:0;}
	.spacer{clear:both; height:1px;}


	#userPanel{
		width: 320px;
		padding: 10px;
		border:solid 2px #b7ddf2;
		background:#ebf4fb;
		font-size:12px;
	}
	
	.bold {
		font-weight: bold;
	}
	
	#toolbar {
		padding: 4px;
		margin-bottom: 5px;
	}
	
	#progressbar {
		
		margin-bottom: 10px;
	}
	
	#text, #times {
		font-size: 12px;
	}
	
	#current_playlist
	{
		font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		font-size:12px;
		width:100%;
		text-align:left;
		margin:0px;
		padding: 0;
		list-style-type: none;
		cursor: pointer;	
	}
	
	#current_playlist li { margin: 0 5px 5px 5px; padding: 5px; overflow: hidden;white-space: nowrap; }
	html>body #current_playlist li { height: 1.5em; line-height: 1.2em; }
	.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
	
	
	#userPanel {
		font-size: 12px;
	}
	
	#userPanel button#logout {
		float: right;
	}
	
	#current_playlist li div {
		float: left;
		display: block;
		overflow: hidden;
	}
	
	#current_playlist li div.counter {
		width: 10px;
	}
	
	#current_playlist li div.title {
		width: 250px;
		margin-right: 5px;
	}
	
	#current_playlist li div.length {
		width: 40px;
	}
	
	
	#current_playlist li:hover
	{
		color:#339;
		background:#d0dafd;
	}
	
	#current_playlist li.current {
		background: pink;			
	}
		
	::-webkit-scrollbar {
		width: 12px;
	}

	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		border-radius: 10px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
	}
	
	.username {
		color: blue;
		font-weight: bold;
	}
	
	.error {
		color: red;
		font-weight: bold;
	}
	
	.hide {
		display: none;
	}
	
	#search {
		color: #666;
	}
	
	#signup {
		float: right;
	}
	
	.center {
		text-align: center;
	}
	
	.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
	/* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */
	* html .ui-autocomplete {
		height: 100px;
	}
	
	</style>
</head>
<body>
	<div id="loading" style="display: none;">
		<div class="item">
			<span>FMP is still loading... Please wait...</span>
		</div>
	</div>
	
	<div id="main" style="display: none;">
		<div id="userPanel">
			<div id="loginForm">
				<button id="login">Login</button>
				<button id="signup">Register</button>
			</div>
			
			<div id="logoutForm">Logged in as <span class="username"></span> <button id="logout">Logout</button><br style="clear: both;" /></div>
		</div>

		<div id="text"><span width="350" height="20"></span></div>
	
		<div id="toolbar" class="ui-widget-header ui-corner-all">
			<button id="prev">rewind</button>
			<button id="play">play</button>
			<button id="stop">stop</button>
			<button id="next">forward</button>
			
			<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
			<input type="checkbox" id="repeat" /><label for="repeat">Repeat</label>
			
			<button id="volume">Volume</button>
			
			<button id="video">Video</button>
			
			<button id="library">Library</button>
			
			
			<input type="checkbox" id="playlist"><label for="playlist">Show/Hide playlist</label>
		</div>
		
		<div id="times">
			
		</div>
			
		
		<div id="progressbar"></div>
		
		<div id="volumebar"></div>
		
		
		
		<div id="current_playlist_wrapper">
			<div style="overflow:auto;height:350px;margin-top: 20px;position:relative;">
				<div class="center"></div>
				<ul id="current_playlist">
				</ul>
			</div>
			
			<button id="trash">Clear playlist</button>
			<button id="save">Save playlist</button>
			<input id="playlist_select" style="display: none;" />
			<button id="load">Load playlist</button>	
			<input id="search" type="text" value="Search current playlist" />
		</div>
		
		<div id="menu" style="display: none">
			<div id="giftlist" class="item">
				<span></span>
			</div>
			<div id="separatorProxies" class="separator"></div>
			<div id="panic" class="item">
				<span></span>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="js/player.js"></script>
</body>
</html>